<template>
	<view class="content">
		<!-- <text class="success-icon yticon icon-xuanzhong2"></text> -->
		<image class="img" src="/static/icon_chenggong.png"></image>
		<!-- <text class="success-icon yticon icon-xuanzhong2"></text> -->
		<text class="tit">订单支付成功</text>
		<view class="row">
			<text>支付方式</text>
			<text class="pay-type">{{paymentInfo.trade_type}}</text>
		</view>
		<view class="row">
			<text>支付金额</text>
			<text class="pay-price">￥{{paymentInfo.payAmount}}</text>
		</view>
		<view class="btn-group">
			<navigator url="/mall/order/order?state=0" open-type="redirect" class="mix-btn">查看订单</navigator>
			<navigator url="/pages/category/category" open-type="switchTab" class="mix-btn hollow">继续购物</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentInfo: {
					'trade_type': '',
					'payAmount': 0
				}
			}
		},
		onLoad(options) {
			console.log('*******************options.payType********************');
			console.log(options.payType);

			switch (options.payType) {
				case "1":
					this.paymentInfo.trade_type = '微信支付';
					break
				case "2":
					this.paymentInfo.trade_type = '支付宝支付';
					break
				case "3":
					this.paymentInfo.trade_type = '福分抵扣'
					break;
				case "4":
					this.paymentInfo.trade_type = '福分支付'
					break;
			}
			this.paymentInfo.payAmount = parseFloat(options.payAmount).toFixed(2);
		},
		methods: {

		}
	}
</script>

<style lang='scss'>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 233upx;
		height: 312upx;
		margin: 96upx 0 34upx;
	}

	.success-icon {

		font-size: 160upx;
		color: #fa436a;
		margin-top: 100upx;
	}

	.tit {
		margin-bottom: 60upx;
		font-size: 36upx;
		font-weight: 600;
		color: #313333;
	}

	.row {
		/* width: 100%; */
		/* height: 40upx; */
		margin-top: 40upx;
		color: #ABADAD;
		font-size: 28upx;

		justify-content: center;
		align-items: center;

		.pay-type {
			margin-left: 30upx;
			color: #313332;
		}

		.pay-price {
			margin-left: 30upx;
			font-size: 36upx;
			color: #E52631;
		}
	}

	.btn-group {
		padding: 100upx 60upx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* padding-top: 100upx; */
	}

	.mix-btn {
		/* margin-top: 30upx; */
		display: flex;
		/* flex-direction: row; */
		align-items: center;
		justify-content: center;
		width: 270upx;
		height: 88upx;
		border-radius: 44upx;
		font-size: $font-lg;
		color: #313333;
		background-color: #fff;
		border: 1px solid #ccc;

		&.hollow {
			background-color: #FFBC21;
			margin-left: 80upx;
			color: #232323;
			border: 0;
			/* border: 1px solid #ccc; */
		}
	}
</style>
